<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单验证</title>
</head>
<body>
    <span>账号</span>
    <input type="text">
    <br/>
    <br/>
    <span>密码</span>
    <input type="password">
    <br/>
    <br/>
    <span>手机</span>
    <input type="text">
    <br/>
    <br/>
    <span>邮箱</span>
    <input type="text">
    <span id ='mail-span' style="color:red;display:none;">邮箱格式不符合规则</span>
    <br/>
    <br/>
    <button onclick="submitBtb()">提交</button>
    <script>
    var account,pas,mobile,mail;
    var accountTm,pasTm,mobileTm,mailTm;
        account = document.getElementsByTagName('input')[0];
        pas = document.getElementsByTagName('input')[1];
        mobile = document.getElementsByTagName('input')[2];
        mail = document.getElementsByTagName('input')[3];

        accountTm = /^(?=.*[0-9])(?=.*[a-zA-Z])([a-zA-Z0-9]{6,20})$/;
        pasTm =  /^(?=.*[0-9])(?=.*[a-zA-Z])([a-zA-Z0-9]{6,20})$/;
        mobileTm =  /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/;
        mailTm = /^[a-z0-9]+([._\\-]*[a-z0-9])*@([-a-z0-9]*[a-z0-9][a-z0-9]+.){1,63}[a-z0-9+$]/; 

    function submitBtb() {
        if(account.value == '' || pas.value == ''||mobile.value =='' ||mail.value ==''){
            alert('存在未填项')
            return;
        }
        if(!accountTm.test(account.value)){
            alert('账号不符合规则，必须同时包含字母和数字');
            return;
        }

         if(!pasTm.test(pas.value)){
            alert('密码不符合规则，必须同时包含字母和数字');
            return;
        }

         if(!mobileTm.test(mobile.value)){
            alert('手机号不符合规则');
            return;
        }

             if(!mailTm.test(mail.value)){
                document.getElementById('mail-span').style.display ='inline-block';
                /*alert('邮箱不符合规则');*/
                return;
            }else {
                document.getElementById('mail-span').style.display = 'none';
            }

        alert('提交成功!');
    }
    </script>
</body>
</html>